import React from 'react'
import './login.css'
import { Button, Modal, Input, message } from 'antd'

class Login extends React.Component {

  state = {
    username: '', // 用户账号
    password: '', // 用户密码
  }

  componentDidMount() {
    document.body.onkeyup = ((e) => {
      let { keyCode } = e
      if (keyCode === 13) {
        this.login()
      }
    })
  }

  componentWillUnmount() {
    document.body.onkeyup = null
  }

  login = () => {
    let { username, password } = this.state
    if (username === '746120324' && password === 'djr1997') {
      window.localStorage.logined = '1'
      Modal.info({
        title: '提示',
        content: (
          <div>
            <p>登录成功</p>
          </div>
        ),
        onOk: () => {
          this.props.history.replace('/home')
        }
      })
    } else {
      message.error('登录失败')
    }
  }

  // 输入值改变事件
  onChange = (e, name) => {
    this.setState({
      [name]: e.target.value
    })
  }

  render() {
    return (
      <div className="_login">
        <div className="login-title">预算项目申报系统</div>
        <div className="login-box">
          <div className="login-box-title">账号密码登录</div>
          <div className="login-input">
            <Input size="large" placeholder="账户" onChange={ (e) => this.onChange(e, 'username') }></Input>
            <Input size="large" placeholder="密码" type="password" onChange={ (e) => this.onChange(e, 'password') }></Input>
          </div>
          <Button type="primary" size="large" className="login-submit" onClick={ this.login }>登录</Button>
        </div>
      </div>
    )
  }

}

export default Login